<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存单元详情页</title>
</head>
<body>
<div id="sku_dlg" class="easyui-dialog" title="编辑sku" style="width:700px;height:520px;"
     closed="true"  data-options="iconCls:'icon-save',resizable:true,modal:false" buttons="#skuBtns" >
    <form id="skuForm">
        <br/>
        <label>sku名称:</label>
        <input  id="skuName" name="skuName" class="easyui-textbox" data-options="" style="width:300px;"/>
        <br/><br/>
        <label>商品价格:</label>
        <input  id="price" name="price" class="easyui-numberbox" data-options="min:0,precision:2" style="width:300px;"/>
        <br/><br/>
        <label>商品重量（千克):</label>
        <input  id="weight" name="weight" class="easyui-numberbox" data-options="min:0,precision:2" style="width:300px;"/>
        <br/><br/>
        <label>商品规格描述:</label>
        <input  id="skuDesc" name="skuDesc" class="easyui-textbox" data-options="multiline:true" style="width:500px;height:100px"/>
        <input id="spuIdForSku" name="spuId" type="hidden"/>

        <input id="skuId" name="id" type="hidden"/>

        <input id="catalog3IdForSku" name="catalog3Id" type="hidden"/>
        <br/><br/>

        <input id="skuInfo" name="skuInfo" type="hidden"/>


        <div id="attrInfoGroup"  title="平台属性" class="easyui-panel" style="padding:5px;" ></div>

        <div id="spuSaleAttrGroup" title="销售属性" class="easyui-panel" style="padding:5px;" ></div>


        <!----------------商品图片列表 ----------------------->

        <table id="skuImgDg" class="easyui-datagrid" title="商品图片列表" data-options="singleSelect:false,selectOnCheck:false,method:'get'" ></table>

        <br/><br/>

        <!-------------->

    </form>
</div>
<!----------------弹出框的按钮组----------------------->
<div id="skuBtns">
    <a href="#" class="easyui-linkbutton" onclick="saveSku()">保 存</a>
    <a href="#" class="easyui-linkbutton" onclick="closeSku()">关 闭</a>
</div>
</body>

<script type="text/javascript">
    function initSkuInfoDlg(){

        /**打开对话框*/
        $('#sku_dlg').dialog("open");

        /**初始化表单*/
        initSkuForm();

        /**初始化平台属性*/
        initBaseAttrInfoSelect();

        /**初始化销售属性*/
        initSpuSaleAttrGroup();

        /**初始化图片列表*/
        initSkuImgDatagrid();

    }

    function initSkuForm() {
        $("#skuForm").form("reset");
    }

    /***
     * 平台属性初始化的依据是三级分类
     */
    function initBaseAttrInfoSelect() {
        var catalog3Id = $("#ctg3ForSpuList").combobox("getValue"); //
        $('#attrInfoGroup').html("");
        $.get("getAttrList?catalog3Id=" + catalog3Id, function (data) {
            var baseAttrInfoList = data;
            console.log(JSON.stringify(baseAttrInfoList));
            for(var i = 0; i < baseAttrInfoList.length; i++) {
                var baseAttrInfo = baseAttrInfoList[i];
                var baseAttrInfoHtml = "<span>"+baseAttrInfo.attrName+": </span><select style='width: 150px' class = 'easyui-combobox' attrInfoId = '"+baseAttrInfo.id+"'>";
                var baseAttrValueList = baseAttrInfo.attrValueList;
                for(var j = 0; j < baseAttrValueList.length; j++) {
                    var baseAttrValue = baseAttrValueList[j];
                    var baseAttrValueHtml = "<option value='"+baseAttrValue.id+"'>" + baseAttrValue.valueName + "</option>";
                    baseAttrInfoHtml += baseAttrValueHtml;
                }
                baseAttrInfoHtml += "</select>";
                console.log("baseAttrInfoHtml" + baseAttrInfoHtml);
                $('#attrInfoGroup').append($(baseAttrInfoHtml));
            }
        });
    }

    /**
     * 初始化销售属性
     * @param spuId
     */
    function initSpuSaleAttrGroup() {
        console.log("初始化销售属性列表...");
        var row = $("#spulist_dg").datagrid("getSelected");
        var spuId=row.id;
        var spuSaleAttrList = {};
        $('#spuSaleAttrGroup').html("");
        var spuSaleAttrGroup= $('#spuSaleAttrGroup');
        $.get("spuSaleAttrList?spuId="+spuId, function (data) {
            console.log("spuSaleAttrList:"+ JSON.stringify(data));
            spuSaleAttrList=data;
            for(var i = 0; i < spuSaleAttrList.length; i++) {
                var spuSaleAttr = spuSaleAttrList[i];
               /* var spuSaleAttrHtml='<span>'+spuSaleAttr.saleAttrName+': </span>';
                spuSaleAttrHtml += "<select saleAttrId="+spuSaleAttr.saleAttrId+"spuSaleAttrName="+spuSaleAttr.saleAttrName+"  class='easyui-combobox' style='width:150px'>";*/
                var spuSaleAttrHtml='<span>'+spuSaleAttr.saleAttrName+':</span>' +
                    '<select saleAttrId="'+spuSaleAttr.saleAttrId+'"  spuSaleAttrName="'+spuSaleAttr.saleAttrName+'"  class="easyui-combobox"   style="width:180px">';
                for(var j = 0; j < spuSaleAttrList[i].spuSaleAttrValueList.length; j++) {
                    var spuSaleAttrValue = spuSaleAttrList[i].spuSaleAttrValueList[j];
                    var spuSaleAttrValueHtml='<option value="'+spuSaleAttrValue.id+'">'+spuSaleAttrValue.saleAttrValueName+'</option>';
                    spuSaleAttrHtml=spuSaleAttrHtml+spuSaleAttrValueHtml;
                }
                spuSaleAttrHtml+='</select>';
                console.log(spuSaleAttrHtml);
                spuSaleAttrGroup.append($(spuSaleAttrHtml));
            }
            loadSkuSaleAttr();
        });
    }

    /**
     * 加载sku销售属性
     */
    function loadSkuSaleAttr () {
        if($("#skuInfo").val()==''){
            return;
        }
        var skuInfo=JSON.parse($("#skuInfo").val());
        console.log("开始加载sku销售属性："+skuInfo.skuSaleAttrValueList);
        if(!skuInfo ||!skuInfo.skuSaleAttrValueList){
            return;
        }
        var skuSaleAttrValueList=skuInfo.skuSaleAttrValueList;
        var selects = $("#spuSaleAttrGroup").find("select");
        console.log(" selects.html()::"+ selects.html());
        for(var i = 0; i < selects.length; i++) {
            var select = selects.eq(i);
            for(var j = 0; j < skuSaleAttrValueList.length; j++) {
                console.log("SaleAttrVs::::::"+skuSaleAttrValueList[j].saleAttrId+"||"+select.attr("saleAttrId"));
                if(skuSaleAttrValueList[j].saleAttrId==select.attr("saleAttrId")) {
                    console.log("skuSaleAttrValueList[j].saleAttrValueId+++"+skuSaleAttrValueList[j].saleAttrValueId);
                    select.val(skuSaleAttrValueList[j].saleAttrValueId);
                }
            }
        }
    }

    /**商品图片列表*/
    function initSkuImgDatagrid() {
        $('#skuImgDg').datagrid('loadData', { total: 0, rows: [] }); // 清空表格
        skuImgDg = $("#skuImgDg").datagrid({
            columns:[[
                { field:'checkFlag',checkbox:true, width:'5%'}, // 第一列为复选框 checkbox属性为true即可
                { field:'id',title:'文件编号',width:'20%'},//隐藏文件页面内部编号
                { field:'imgName',title:'图片简称',width:'25%'},
                { field:'imgUrl',title:'图片路径' ,width:'25%',
                    formatter:function (value, row, index) { // 将图片路径展示为一张图
                        /*return "<img src="+row.imgUrl+" style='width:100px;height:100px;'>";*/
                        return "<img src='"+value+"' style='width: 100px; height: 100px' />";
                    }
                },
                { field:'isDefault',title:'是否默认图片' ,width:'25%',
                    editor:{type: 'checkbox' ,
                        options: {on:"1", off:"0"} // 默认图片为1 不默认图片为0
                    }
                }
            ]],
            onLoadSuccess: function () {   //隐藏表头的checkbox
                console.log("共加载"+skuImgDg.datagrid("getRows").length+"行");
                skuImgDgbeginEdit();
            }
        });
        var row = $('#spulist_dg').datagrid("getSelected");
        $("#skuImgDg").datagrid({url:"spuImageList?spuId=" + row.id});
    }

    /**窗口打开编辑模式*/
    function skuImgDgbeginEdit() {
        var skuImgDg = $("#skuImgDg");
        var rows = skuImgDg.datagrid('getRows');
        for (var i = 0; i < rows.length; i++) {
            skuImgDg.datagrid('beginEdit', i);
        }
    }

    /**保存按钮*/
    function saveSku() {
        var skuInfo = {};

        /**==========================直接获取普通文本框的内容==============================*/
        // sku名称
        skuInfo["skuName"] = $("#skuName").val();

        // 商品规格描述
        skuInfo["skuDesc"] = $("#skuDesc").val();

        // 商品价格
        skuInfo["price"] = $("#price").val();

        // 商品重量（千克)
        skuInfo["weight"] = $("#weight").val();

        // 隐藏标签 保存spuid
       /* skuInfo["spuId"] = $("#spuIdForSku").val();*/
        skuInfo["spuId"] = $("#spulist_dg").datagrid("getSelected").id;

        // 隐藏标签 保存skuId
        skuInfo["id"] = $("#skuId").val();

        // 隐藏标签 保存
        /*skuInfo["catalog3Id"] = $("#catalog3IdForSku").val();*/
        skuInfo["catalog3Id"] = $("#ctg3ForSpuList").combobox("getValue");

        skuImgDgendEdit();

        /**获取商品图片属性值*/
        var skuImgDgRows = $("#skuImgDg").datagrid('getChecked');
        for(var i = 0; i < skuImgDgRows.length; i++) {
            skuInfo["skuImageList[" + i + "].imgName"] = skuImgDgRows[i].imgName;
            skuInfo["skuImageList[" + i + "].imgUrl"] = skuImgDgRows[i].imgUrl;
            if(skuImgDgRows[i].isDefault=='1'){
                skuInfo["skuDefaultImg"]=skuImgDgRows[i].imgUrl;
            }
            skuInfo["skuImageList[" + i + "].spuImgId"] = skuImgDgRows[i].id;
            skuInfo["skuImageList[" + i + "].isDefault"] = skuImgDgRows[i].isDefault;
        }

        /**========================获取子模块中下拉菜单的值=============================*/

        /**获取平台属性值*/
        var attrInfoSelect = $("#attrInfoGroup").children("select");
        for(var i = 0; i < attrInfoSelect.length; i++) {
            var valueId = attrInfoSelect.eq(i).find("option:selected").val();
            var attrId = attrInfoSelect.eq(i).attr("attrInfoId");
            skuInfo["skuAttrValueList[" + i + "].attrId"]=attrId;
            skuInfo["skuAttrValueList[" + i + "].valueId"]=valueId;
        }

        /**获取销售属性*/
        var spuSaleAttrSelect = $("#spuSaleAttrGroup").children("select");
        for(var i = 0; i < spuSaleAttrSelect.length; i++) {
            var saleAttrId = spuSaleAttrSelect.eq(i).attr("saleAttrId");
            var saleAttrName = spuSaleAttrSelect.eq(i).attr("spuSaleAttrName");
            var saleValueId = spuSaleAttrSelect.eq(i).find("option:selected").val();
            var saleAttrValueName = spuSaleAttrSelect.eq(i).find("option:selected").text();
            skuInfo["skuSaleAttrValueList[" + i + "].saleAttrId"]=saleAttrId;
            skuInfo["skuSaleAttrValueList[" + i + "].saleAttrName"]=saleAttrName;
            skuInfo["skuSaleAttrValueList[" + i + "].saleAttrValueId"]=saleValueId;
            skuInfo["skuSaleAttrValueList[" + i + "].saleAttrValueName"]=saleAttrValueName;
        }
        console.log(JSON.stringify(skuInfo));

        /**通过ajax保存到后台*/
        $.post("/saveSku", skuInfo, function (data) {
            $("#sku_dlg").dialog("close");
            $("#skulist_dg").datagrid("reload");
        });
    }

    /**循环关闭，因为默认图片的问题*/
    function skuImgDgendEdit(){
        var rows = $("#skuImgDg").datagrid("getRows");
        for (var i = 0; i < rows.length; i++) {
            skuImgDg.datagrid('endEdit', i);
        }
    }

    /**关闭按钮*/
    function closeSku(){
        $("#sku_dlg").dialog("close");
    }

</script>
</html>